<template>
  <div>
    <el-button @click="show=true">打开</el-button>
    <div>
      姓名：{{inputValue}}
    </div>
    <div>所属分类：{{chkValue.join(' > ')}}</div>
    <el-tag @close="tmpTreeData.splice(k, 1)" closable :key="k" v-for="(v,k) in tmpTreeData">{{v.title}}</el-tag>
    <el-dialog :visible.sync="show" :title="'第' + step + '步'">
      <template v-if="step==1">
        <el-cascader
        v-model="chkValue"
        :options="comCateData"
        :props="{
          children: 'child',
          label: 'title',
          value: 'title'
        }"
      ></el-cascader>
      </template>
      <template v-if="step==2">
        <div>
          所选分类：{{chkValue.join(' > ')}}
        </div>
        <div>
          <el-input v-model="inputValue"></el-input>
        </div>
      </template>
      <template v-if="step==3">
        <el-tree
          ref="tree"
          show-checkbox
          :data="cateData"
          :props="{
            children: 'child',
            label: 'title',
            value: 'title'
          }"
        ></el-tree>
      </template>

      <template slot="footer">
        <el-button v-if="step==3" @click="ok">确定</el-button>
        <el-button v-if="chkValue.length>0 && step<3" @click="step++">下一步</el-button>
        <el-button @click="show=false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      step: 1, // 第几步
      show: false, // 是否显示
      chkValue: [], // 选择的分类
      inputValue: '',
      cateData: [],
      tmpTreeData: []
    }
  },
  computed: {
    comCateData: function() {
      // 返回有 child 字段的数组
      return this.cateData.filter(v => v.child)
    }
  },
  created() {
    console.log('xxyyzz')
    // 创建一个新的 axios 对象
    const api = axios.create()

    api.get('http://172.18.7.1:3000/api/cate.json').then(res => {
      console.log(res)
      this.cateData = res.data.data
    })
  },
  methods: {
    ok() {
      // 获取勾选的值
      this.tmpTreeData = this.$refs.tree.getCheckedNodes()

      // 关闭框
      this.show = false
    }
  }
}
</script>
